<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>联合金控数据平台</title>
    <!-- Bootstrap Styles-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome Styles-->
    <link href="assets/css/iconfont.css" rel="stylesheet">
    <!-- Morris Chart Styles-->
    <!-- Custom Styles-->
    <link href="assets/css/custom.css" rel="stylesheet">
    <link href="assets/css/index.css" rel="stylesheet">
</head>

<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">联合金控数据平台</a>
            </div>
            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="iconfont icon-person"></i>
                        <i class="iconfont icon-triangle"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li>
                            <a href="#">
                                <i class="iconfont icon-person"></i>User Profile</a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-set"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <i class="iconfont icon-checkout"></i> Logout</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">
                    <li>
                        <a class="active-menu" href="index.html">
                            <i class="iconfont icon-datas"></i> 债权总览</a>
                    </li>
                    <li>
                        <a href="assets.html">
                            <i class="iconfont icon-house-key"></i> 资产类目</a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper">
            <div id="page-inner">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            总览
                            <small>数据总览</small>
                        </h1>
                    </div>
                </div>
                <!-- /. ROW  -->
                <div class="row">
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder bg-color-green">
                            <div class="panel-body">
                                <i class="iconfont icon-datas-sql bigfont60"></i>
                                <h3>88,457</h3>
                            </div>
                            <div class="panel-footer back-footer-green">
                                债权总额 (万元)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder bg-color-blue">
                            <div class="panel-body">
                                <i class="iconfont icon-charts bigfont60"></i>
                                <h3>52,160 </h3>
                            </div>
                            <div class="panel-footer back-footer-blue">
                                评估价值(万元)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder bg-color-red">
                            <div class="panel-body">
                                <i class="iconfont icon-note-book bigfont60"></i>
                                <h3>15,823 </h3>
                            </div>
                            <div class="panel-footer back-footer-red">
                                债权笔数
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder bg-color-brown">
                            <div class="panel-body">
                                <i class="iconfont icon-person bigfont60"></i>
                                <h3>10,752 </h3>
                            </div>
                            <div class="panel-footer back-footer-brown">
                                借款人数
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                业务类型分布
                            </div>
                            <div class="panel-body">
                                <div id="main" style="width: 100%;height:350px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                担保类型分布
                            </div>
                            <div class="panel-body">
                                <div id="guaranttype" style="width: 100%;height:350px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /. ROW  -->
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                债权列表
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover" id="dataTable-claims">
                                        <thead>
                                            <tr>
                                                <th>更新时间</th>
                                                <th>业务类型</th>
                                                <th>业务品种</th>
                                                <th>本金</th>
                                                <th>利息</th>
                                                <th>总额</th>
                                                <th>逾期日期</th>
                                                <th>担保方式</th>
                                                <th>处置机构</th>
                                                <th>债务人</th>
                                                <th>担保人</th>
                                                <th>借款人</th>
                                            </tr>
                                        </thead>
                                        <tbody id="claims_list_content">
                                            <tr>
                                                <td>{{value.UPDATE_TIME}}</td>
                                                <td>{{value.TYPES_OF}}</td>
                                                <td>{{value.BUSINESS_TYPES}}</td>
                                                <td>{{value.PRINCIPAL}}</td>
                                                <td>{{value.INTEREST}}</td>
                                                <td>{{value.LUMP_SUM}}</td>
                                                <td>{{value.OVERDUE_DATE}}</td>
                                                <td>{{value.GUARANTEE_METHOD}}</td>
                                                <td>{{value.BUSINESS_ORGANIZATION}}</td>
                                                <td>{{value.OVERDUE_DATE}}</td>
                                                <td>{{value.GUARANTEE_METHOD}}</td>
                                                <td>{{value.BUSINESS_ORGANIZATION}}</td>
                                            </tr>

                                        </tbody>
                                        <script id="claims_list" type="text/html">
                                            {{each list value i}}
                                            <tr>
                                                <td>{{value.UPDATE_TIME}}</td>
                                                <td>{{value.TYPES_OF}}</td>
                                                <td>{{value.BUSINESS_TYPES}}</td>
                                                <td>{{value.PRINCIPAL}}</td>
                                                <td>{{value.INTEREST}}</td>
                                                <td>{{value.LUMP_SUM}}</td>
                                                <td>{{value.OVERDUE_DATE}}</td>
                                                <td>{{value.GUARANTEE_METHOD}}</td>
                                                <td>{{value.BUSINESS_ORGANIZATION}}</td>
                                                <td>{{value.OVERDUE_DATE}}</td>
                                                <td>{{value.GUARANTEE_METHOD}}</td>
                                                <td>{{value.BUSINESS_ORGANIZATION}}</td>
                                            </tr>
                                            {{/each}}
                                        </script>
                                    </table>
                                </div>
                            </div>
                            <div class="page">
                                <button type="button" min="1" id="gotopages" class="btn btn-primary right">确定</button>
                                <input type="text" id="input-pages" class="form-control right" placeholder="跳转至">
                                <nav aria-label="Page navigation" class="right">
                                    <ul class="pagination" id="pagination">
                                    </ul>
                                </nav>
                                <div class="page-select col-md-2 col-sm-2 col-xs-2 right">
                                    <select class="form-control" id="page-select">
                                        <option value="10">10条/页</option>
                                        <option value="20">20条/页</option>
                                        <option value="50">50条/页</option>
                                        <option value="100">100条/页</option>
                                    </select>
                                </div>
                                <span class="page-total right" id="pageTotal"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /. ROW  -->
                <footer>
                    <p>Copyright &copy; Union Financial Management Co., Ltd.
                    </p>
                </footer>
            </div>
            <!-- /. PAGE INNER  -->
        </div>
        <!-- /. PAGE WRAPPER  -->
    </div>
    <!-- /. WRAPPER  -->
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap Js -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Metis Menu Js -->
    <!-- 引入echarts cdn -->
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script src="assets/js/template-web.js"></script>
    <!-- Custom Js -->
    <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script type="text/javascript" src="assets/js//mock/mock.js"></script>
    <script src="assets/js/customs/utils.js"></script>
    <script src="assets/js/customs/custom.js"></script>
    <script>

    </script>
</body>

</html>